<template>
  <div class="captcha_box" :style="{top}" @click="captchaBox">
    <div id="captcha-div" ref="captchaRef" @click.stop></div>
  </div>
</template>

<script setup>
import {ref} from "vue";
const emits = defineEmits(['success'])
const props = defineProps(['config'])
const top = ref('-100vh')
const captchaRef = ref()
const config = {
  requestCaptchaDataUrl: "/api/captcha",
  validCaptchaUrl: "/api/check",
  bindEl: "#captcha-div",
  // 验证成功回调函数
  validSuccess: (res, c, tac) => {
    props.success && props.success(res, c, tac)
    emits('success', res, c, tac)
    tac.destroyWindow();
    top.value = '-100vh'
  },
  btnCloseFun: (el, tac) => {
    tac.destroyWindow();
    top.value = '-100vh'
  },
}
const openVerification = () => {
  top.value = '0'
  console.log({...config, ...props.config}, 111)
  new window.TAC({...config, ...props.config}).init();
}
const captchaBox = () => {
  console.log(captchaRef.value, 'captchaRef.value')
  captchaRef.value.innerText = ''
  top.value = '-100vh'
}
defineExpose({
  openVerification
})
</script>

<style lang="scss" scoped>
.captcha_box {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all .2s;
}
</style>